<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-select.css" rel="stylesheet">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/JyyCommon.css" rel="stylesheet">
<link href="../css/JyyTable.css" rel="stylesheet">
<link href="../css/JyyTree.css" rel="stylesheet">
<link href="../css/JyyMsgBox.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../js/jquery.form.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<script type="text/javascript" src="../js/jyy_modal.js"></script>
<script type="text/javascript" src="../js/JyyCommon.js"></script>
<script type="text/javascript" src="../js/JyyTable.js"></script>
<script type="text/javascript" src="../js/JyyTree.js"></script>
<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
<script type="text/javascript" src="../js/JyyLoading.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/layui/layui.js"></script>
<script type="text/javascript" src="../js/xm-select.js"></script>

<style type="text/css">
body, html {
	width: 100%;
	height: 100%;
}

.selBtn {
	float: left;
	margin-left: 20px;
	height: 30px;
	width: 70px;
	background-color: #1890FF;
	border-radius: 5px;
	border: 0px;
	color: white;
}

.selBtn:hover {
	background-color: #00BFFF;
}

.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
	float: left;
}

.cumCard {
	margin-left: 126px;
	width: 262px;
	height: 117px;
	display: inline-block;
	margin-top: 98px;
}

.amount {
	width: 170px;
	height: 50px;
	margin-top: -19px;
	display: inline-block;
	margin-left: 100px;
}

.val {
	width: 121px;
	display: inline-block;
	font-size: 25px;
	font-weight: bolder;
	color: #00CFFF;
	text-align: right;
	margin: 10px;
}
/* 
#cumulativeDiv {
	border-width: 0px;
	position: absolute;
	margin-left: 0px;
	top: 0px;
	width: calc(100% - 3px);
	height: 255px;
	background: inherit;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 2px;
} */

#dataDiv {
	position: absolute;
	left: 0px;
	top: 0px;
	width: calc(100% - 3px);
	height: 255px;
}

#round1, #round2, #round3, #round4, #round5 {
	min-width: 200px;
	width: 20%;
	height: 68%;
	border: 2px solid #dedede;
	border-radius: 15px;
	position: relative;
	display: inline-block;
}
.card {
	margin-left: 10px;
	width: 18%;
	min-width: 230px;
	height: 138px;
	border-radius: 10px;
	padding-top: 15px;
	margin-right: 10px;
	display : inline-block;
	margin-top: 20px;
}
.cardTitle {
	padding-left: 15px;
	font-size: 14px;
	font-weight: bold;
	color: white;
}
.mask {
	background-color: rgb(0, 0, 0 ,0.1);
	width: 18%;
	min-width: 230px;
	color: white;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	height: 32px;
	display: table-cell;
	vertical-align: middle;
	cursor: pointer;
}
.downLeft {
	margin-left: 20px;
	color: white;
	font-size: 14px;
	font-weight: bold;
}
.shadow {
	box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
	border-radius: 0.25rem!important;
	margin-left: 20px;
}
.shadow::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    outline-color: #ccc;
}
.leftContent {
	text-align: center;
	vertical-align: middle;
	color: white;
	font-size: 32px;
	font-weight: bolder;
}
.echartBox {
	width: calc(100% - 40px);
	margin-bottom: 20px;
	margin-top: 20px;
	margin-left: 20px;
}

.echartList {
	display: inline-block;
	width: 49%;
	height: 466px;
	margin-bottom: 20px;
	box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
}
</style>
</head>
<body>
	<div id="bigDiv" style="overflow-y: auto;overflow-x: hidden;width: 100%; height: 100%;">
		<div style="height: 50px;">
			<div class="col-md-12"
				style="padding-left: 5px; padding-right: 5px; margin-top: 10px; margin-left: 20px; margin-right: 20px;">
				<label class="control-label col-sm-1"
					style="float: left; margin-top: 7px; padding: 0px; width: 40px; font-weight: normal;">年份</label>
				<select class="form-control selectpicker" title="请选择年份" data-width="132px" id="yearSel"
					style="float: left; margin-top: -3px; padding: 5px; font-weight: normal;"></select>
				<button class="selBtn" onclick="select()">查询</button>
			</div>
		</div>
		<div id="cumulativeDiv" class="shadow" style="height: 180px;width: calc(100% - 40px);margin-top: 10px;white-space:nowrap;overflow-x:scroll;overflow-y:hidden;">
			<div class="card" style="background-color: #00d4a6;">
				<p class="cardTitle">机组数量(个)</p>
				<div style="width: 100%;height: 60px;">
					<div class="leftContent" id="array">0</div>
				</div>
				<div class="mask" onclick="cliu()">
					<span class="downLeft">数据明细</span>
					<span style="float: right;margin-right: 20px;"><img src="../images/right.png"></span>
				</div>
			</div>
			<div class="card" style="background-color: #00cfff;">
				<p class="cardTitle">节点数量(个)</p>
				<div style="width: 100%;height: 60px;">
					<div class="leftContent" id="nodesNumber">0</div>
				</div>
				<div class="mask" onclick="jiedian()">
					<span class="downLeft">数据明细</span>
					<span style="float: right;margin-right: 20px;"><img src="../images/right.png"></span>
				</div>
			</div>
			<div class="card" style="background-color: #0ecfce;">
				<p class="cardTitle">线路数量(条)</p>
				<div style="width: 100%;height: 60px;">
					<div class="leftContent" id="lineNumber">0</div>
				</div>
				<div class="mask" onclick="xianlu()">
					<span class="downLeft">数据明细</span>
					<span style="float: right;margin-right: 20px;"><img src="../images/right.png"></span>
				</div>
			</div>
			<div class="card" style="background-color: #ff94c8;">
				<p class="cardTitle">最大负荷(MW)</p>
				<div style="width: 100%;height: 60px;">
					<div class="leftContent" id="maximumload">0</div>
				</div>
				<div class="mask" onclick="fuhe()">
					<span class="downLeft">数据明细</span>
					<span style="float: right;margin-right: 20px;"><img src="../images/right.png"></span>
				</div>
			</div>
			<div class="card" style="background-color: #cba464;">
				<p class="cardTitle">负荷电量(亿kWh)</p>
				<div style="width: 100%;height: 60px;">
					<div class="leftContent" id="loadPowerNumber">0</div>
				</div>
				<div class="mask" onclick="dianliang()">
					<span class="downLeft">数据明细</span>
					<span style="float: right;margin-right: 20px;"><img src="../images/right.png"></span>
				</div>
			</div>
		</div>

		<div class="echartBox">
			<div class="echartList">
				<p style="margin-top: 10px;padding-top: 10px;">
					<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 16px;font-family: '黑体 Bold', '黑体';">机组数量统计</span>
				</p>
				<div id="echartList1" style="height:calc(100% - 46px);margin-top: -24px;"></div>
			</div>
			<div class="echartList" style="float: right;">
				<p style="margin-top: 10px;padding-top: 10px;">
					<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 16px;font-family: '黑体 Bold', '黑体';">在运机组装机容量统计</span>
				</p>
				<div id="echartList6" style="height:calc(100% - 46px);margin-top: -24px;"></div>
			</div>
			<div class="echartList" style="height: 484px;">
				<p style="margin-top: 10px;padding-top: 10px;">
					<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 16px;font-family: '黑体 Bold', '黑体';">待建机组容量上限统计</span>
				</p>
				<div id="echartList2" style="height:calc(100% - 46px);margin-top: -24px;"></div>
			</div>
			
			<div class="echartList" style="float: right;height: 484px;">
				<p style="margin-top: 10px;padding-top: 10px;">
					<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 16px;font-family: '黑体 Bold', '黑体';">新能源利用小时数统计</span>
			    </p>
		    	<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 53px;font-weight: normal;margin-left:26px;">机组类型</label>
			 	<div  id="selectpower" style="float: left;margin-top: -7px;padding: 5px;width: 150px;font-weight: normal;margin-left:-2px;" ></div>
			 	<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 53px;font-weight: normal;margin-left:26px;">机组</label>
			 	<div  id="selectunit" style="float: left;margin-top: -7px;padding: 5px;width: 150px;font-weight: normal;margin-left:-2px;"></div>
		     	<div style="clear: both"></div>
		     	<div id="echartList3" style="height:calc(100% - 46px);margin-top: -26px;"></div>
			</div>
			
			<div class="echartList">
				<p style="margin-top: 10px;padding-top: 10px;">
					<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 16px;font-family: '黑体 Bold', '黑体';">线路数量统计</span>
			    </p>
			    <div id="echartList4" style="height:calc(100% - 46px)"></div>
			</div>
			
			<div class="echartList" style="float: right;">
				<p style="margin-top: 10px;padding-top: 10px;">
					<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 16px;font-family: '黑体 Bold', '黑体';">区域负荷电量统计</span>
			    </p>
			    <div id="echartList5" style="height:calc(100% - 46px)"></div>
			</div>

		</div>
	</div>
</body>
<script type="text/javascript">
	var projectId = this.getQueryString('projectId');
	var colorList = ["#F01B2D", "#00B0F0", "#92D050", "#FFC000", "#FFE957", "#8FFAF7"];
	var typeList = [1, 4, 11, 12, 13, 14];
	var typenameList = ["火电", "水电", "风电", "光伏", "光热", "储能"];

	$(function() {
   		getyear();
	})
	//获取年份
	function getyear() {
		$.ajax({
	    	url : "../g/service/Sample/forYears",
	    	type:'post',
	        contentType: 'application/json; charset=utf-8',
	        data:JSON.stringify({"planid" : projectId }),
	        success : function(data){
	        	var content = "";
	        	var selectedId = "";
	            $.each(data.iyear, function(i,val){ 
	            	content += "<option value ='"+val+"'>"+val+"</option>";
	            	if(i == 0) selectedId = val;
	            }); 
	            $("#yearSel").html(content);
				$('#yearSel').selectpicker('refresh');
				$('#yearSel').selectpicker('val',selectedId)
	            unitselect();
	            chushihua();
			}
		})
	};
//根据年份 获取 数组数量
function select(){
	var year = document.getElementById("yearSel").value;
	$.ajax({
		url : "../g/service/Sample/arrayNumbers",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
	    	$("#array").html(data.arraydata);
	    }
	})
	//根据年份  场景获取节点数量
	$.ajax({
		url : "../g/service/Sample/nodeNumber",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
	    	$("#nodesNumber").html(data.nodeNumber);
		}
	})
	//根据年份  场景 获取 线路数量
	$.ajax({
		url : "../g/service/Sample/lineNumber",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
	    	$("#lineNumber").html(data.lineNumber);
	    }
    })
	//根据年份 获取 最大负荷
	$.ajax({
		url : "../g/service/Sample/maximum",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId,"year" : year}),
        success : function(data){ 
        	$("#maximumload").html(data.maximumNumber[0]);
        }
	})
	//根据年份 获取负荷电量
	$.ajax({
		url : "../g/service/Sample/loadPower",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
	    	$("#loadPowerNumber").html(data.loadPowerNumber);
		}
	})
	//根据年份 场景获取机组数量
	$.ajax({
		url : "../g/service/Sample/unitEchars",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
	    	var series = [];
	        var xname = [];
	        var dataObj = {};
	        for(let item in data.UnitData){
	        	let unittypename = data.UnitData[item].unittypename;
	            if(xname.indexOf(unittypename) == -1){
	            	xname.push(unittypename);
	            }
	        }
            var deData = [];
            for(let k in xname){
            	deData.push(0);
            }
            for(let item in data.UnitData){
            	let planstatus = data.UnitData[item].planstatus;
            	let unittypename = data.UnitData[item].unittypename;
            	let val = data.UnitData[item].val;
            	let index = xname.indexOf(unittypename);
            	if(dataObj[planstatus]){
           			dataObj[planstatus][index] = val;
           		}else{
           			dataObj[planstatus] = JSON.parse(JSON.stringify(deData));
           			dataObj[planstatus][index] = val;
           		}
            }
            for(let key in dataObj){
            	let rObj = {"name":key,"type":'bar',"data":dataObj[key]}
            	series.push(rObj)
            }
        	var chartDom = document.getElementById('echartList1');
    		var myChart = echarts.init(chartDom);
    		var option;
   			option = {
	    		tooltip: {
	    			trigger: 'axis',
	    			axisPointer: {
 						type: 'cross',
 						crossStyle: {
 							color: '#999'
 						}
	    			}
	    		},
	    		toolbox: {
	    			feature: {
	    				dataView: { show: true, readOnly: false },
	    				magicType: { show: true, type: ['line', 'bar'] },
	    				restore: { show: true },
	    				saveAsImage: { show: true }
	    			}
	    		},
	    		legend: {
	    			data: ['Before', 'After']
	    		},
			  	grid: {
			    	left: '5%',
			    	right: '3%',
			    	bottom: '10%',
			    	containLabel: true
			  	},
	    		xAxis: [{
	    			type: 'category',
	    			data: xname,
	    			axisPointer: {
	    				type: 'shadow'
	    			}
	    		}],
	    		yAxis: [{
	    			type: 'value'
	    		}],
	    		series: series
	    	}
		    option && myChart.setOption(option);
   			window.addEventListener("resize", () => {
   				if(myChart){
   					myChart.resize()
   				}
   			})
		}    
	})
	//根据年份 场景获取 机组数量
	$.ajax({
		url : "../g/service/Sample/unitTobeEchars",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
	    	var item3=[];
        	var item2=[];
        	for (let item in data.unitTobeData){
        		item3.push(data.unitTobeData[item].unittypename);
        		item2.push(data.unitTobeData[item].val);
        	} 
	        	 
        	var chartDom = document.getElementById('echartList2');
        	var myChart = echarts.init(chartDom);
        	var option;

	        option = {
	        	xAxis: {
	        		type: 'category',
	        	    data: item3
	        	},
	        	yAxis: {
	        		name:"容量/MW",
	        	    type: 'value'
	        	},
			  	grid: {
			    	left: '5%',
			    	right: '3%',
			    	bottom: '3%',
			    	containLabel: true
			  	},
	        	tooltip:{
	        		tigger:'axis',
	        		axisPointer:{
	        			type:'none'
	        		}
	        	},
	        	series: [{
	        		data: item2,
	        	    type: 'bar',
	        	}]
			};

	        option && myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}
	})
	//根据年份 场景获取 线路数量
	$.ajax({
		url : "../g/service/Sample/lineEchars",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
	      	var item3=[];
	      	var item2=[];
	      	for (let item in data.LineData){
	      		item3.push(data.LineData[item].planstatus);
	      		item2.push(data.LineData[item].val);
	      	} 
	        	 
	       	var chartDom = document.getElementById('echartList4');
	       	var myChart = echarts.init(chartDom);
	       	var option;

	        option = {
	        	xAxis: {
	        		type: 'category',
	        	    data: item3
	        	},
	        	yAxis: {
	        		name:"线路条数/条",
	        	    type: 'value'
	        	},
   			  	grid: {
   			    	left: '5%',
   			    	right: '3%',
   			    	bottom: '5%',
   			    	containLabel: true
   			  	},
	        	tooltip:{
	        		tigger:'axis',
	        		axisPointer:{
	        			type:'none'
	        		}
	        	},
	        	series: [{
	        		data: item2,
	        	    type: 'bar',
	        	    barWidth : 80
	        	}]
			};

	        option && myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
         }
	})
	//根据场景 年份获取 区域负荷电量统计
	$.ajax({
		url : "../g/service/Sample/Regionalload",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
       		var item3=[];
       		var item2=[];
       		for (let item in data.Regionalload){
       			item3.push(data.Regionalload[item].areaname);
       			item2.push(data.Regionalload[item].val);
       		} 
	        	 
        	var chartDom = document.getElementById('echartList5');
        	var myChart = echarts.init(chartDom);
        	var option;

	        option = {
	        	xAxis: {
	        		type: 'category',
	        	    data: item3
	        	},
	        	yAxis: {
	        		name:"亿kWh",
	        	    type: 'value'
	        	},
   			  	grid: {
   			    	left: '5%',
   			    	right: '3%',
   			    	bottom: '5%',
   			    	containLabel: true
   			  	},
	        	tooltip:{
	        		tigger:'axis',
	        		axisPointer:{
	        			type:'none'
	        		}
	        	},
	        	series: [{
	        		data: item2,
	        	    type: 'bar'
	        	}]
			};

	        option && myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
    	}
	})
	// 在运装机机组容量统计
	$.ajax({
		url : "../g/service/Sample/unitCapEchars",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId}),
	    success : function(data){
	    	unitCapEchars(data.res);
		}
	})
}
function chushihua(){
	var year = document.getElementById("yearSel").value;
	var itemData=[];
	var itemData1=[];
	$.ajax({
    	url : "../g/service/Sample/arrayNumbers",
    	 type:'post',
         contentType: 'application/json; charset=utf-8',
         data:JSON.stringify({"planid" : projectId,"year" : year}),
         success : function(data){ 
        	 $("#array").html(data.arraydata);
         }
 	})
	//根据年份  场景获取节点数量
	$.ajax({
		url : "../g/service/Sample/nodeNumber",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
	    	$("#nodesNumber").html(data.nodeNumber);
	    }
	})
	//根据年份  场景 获取 线路数量
	$.ajax({
		url : "../g/service/Sample/lineNumber",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
	      	 $("#lineNumber").html(data.lineNumber);
	    }
	})
	//根据年份 场景 获取 最大负荷
	$.ajax({
		url : "../g/service/Sample/maximum",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId,"year" : year}),
        success : function(data){ 
        	$("#maximumload").html(data.maximumNumber);
        }
	})
    // 根据年份场景 获取负荷电量
    $.ajax({
    	url : "../g/service/Sample/loadPower",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId,"year" : year}),
        success : function(data){ 
        	$("#loadPowerNumber").html(data.loadPowerNumber);
        }    
	})
	//根据年份 场景获取机组数量
	$.ajax({
	   	url : "../g/service/Sample/unitEchars",
	   	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId,"year" : year}),
        success : function(data){ 
	       	var series = [];
	       	var xname = [];
			var dataObj = {};
	        for(let item in data.UnitData){
	        	let unittypename = data.UnitData[item].unittypename;
	           	if(xname.indexOf(unittypename) == -1){
	           		xname.push(unittypename);
	           	}
			}
            var deData = [];
            for(let k in xname){
           		deData.push(0);
            }
           	for(let item in data.UnitData){
	           	let planstatus = data.UnitData[item].planstatus;
	           	let unittypename = data.UnitData[item].unittypename;
	           	let val = data.UnitData[item].val;
	           	let index = xname.indexOf(unittypename);
	           	if(dataObj[planstatus]){
	          		dataObj[planstatus][index] = val;
	        	}else{
	        		dataObj[planstatus] = JSON.parse(JSON.stringify(deData));
	        		dataObj[planstatus][index] = val;
	        	}
			}
            for(let key in dataObj){
           		let rObj = {"name":key,"type":'bar',"data":dataObj[key]}
           		series.push(rObj)
           	}
       	 	var chartDom = document.getElementById('echartList1');
   		 	var myChart = echarts.init(chartDom);
   		 	var option;
   			option = {
  				legend: {bottom:0},
   				tooltip: {
 					trigger: 'axis',
 					axisPointer: {
	 					type: 'cross',
	 					crossStyle: {
	 						color: '#999'
	 					}
 					}
   				},
  				toolbox: {
  					feature: {
  						dataView: { show: true, readOnly: false },
  						magicType: { show: true, type: ['line', 'bar'] },
  						restore: { show: true },
  						saveAsImage: { show: true }
  					}
  				},
   			  	grid: {
   			    	left: '5%',
   			    	right: '3%',
   			    	bottom: '10%',
   			    	containLabel: true
   			  	},
   				xAxis: [{
   					type: 'category',
   					data: xname,
   					axisPointer: {
   						type: 'shadow'
   					}
   				}],
   				yAxis: [{
   					type: 'value'
   				}],
   				series: series
   			}
    		option && myChart.setOption(option);
   			window.addEventListener("resize", () => {
   				if(myChart){
   					myChart.resize()
   				}
   			})
	        	
		}
	});
	//根据年份 场景获取 机组数量
	$.ajax({
		url : "../g/service/Sample/unitTobeEchars",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
	    	var item3=[];
	       	var item2=[];
	       	for (let item in data.unitTobeData){
	       		item3.push(data.unitTobeData[item].unittypename);
	       		item2.push(data.unitTobeData[item].val);
	       	} 
	        	 
        	var chartDom = document.getElementById('echartList2');
        	var myChart = echarts.init(chartDom);
        	var option;

	        option = {
	        	xAxis: {
	        		type: 'category',
	        	    data: item3
	        	},
	        	yAxis: {
	        		name:"容量/MW",
	        	    type: 'value'
	        	},
			  	grid: {
			    	left: '5%',
			    	right: '3%',
			    	bottom: '3%',
			    	containLabel: true
			  	},
	        	tooltip:{
	        		tigger:'axis',
	        		axisPointer:{
	        			type:'none'
	        		}
	        	},
	        	series: [{
	        		data: item2,
	        	    type: 'bar'
	        	}]
	       };

	       option && myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}
	});
	//根据年份 场景获取 线路数量
	$.ajax({
		url : "../g/service/Sample/lineEchars",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
	      	var item3=[];
	      	var item2=[];
	      	for (let item in data.LineData){
	      		item3.push(data.LineData[item].planstatus);
	      		item2.push(data.LineData[item].val);
			} 
		        	 
	       	var chartDom = document.getElementById('echartList4');
	       	var myChart = echarts.init(chartDom);
	       	var option;
	
		    option = {
		    	xAxis: {
		        	type: 'category',
		        	data: item3
		        },
		        yAxis: {
		        	name:"线路条数/条",
		        	type: 'value'
		        },
   			  	grid: {
   			    	left: '5%',
   			    	right: '3%',
   			    	bottom: '5%',
   			    	containLabel: true
   			  	},
		        tooltip:{
		        	tigger:'axis',
		        	axisPointer:{
		        		type:'none'
		        	}
		        },
		        series: [{
		        	data: item2,
		        	type: 'bar',
		        	barWidth : 80
		        }]
			};
		    option && myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}
	});
	//根据场景 年份获取 区域负荷电量统计
	$.ajax({
		url : "../g/service/Sample/Regionalload",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year" : year}),
	    success : function(data){ 
	    	var item3=[];
	        var item2=[];
	        for (let item in data.Regionalload){
	        	item3.push(data.Regionalload[item].areaname);
	        	item2.push(data.Regionalload[item].val);
	        } 
	        	 
	        var chartDom = document.getElementById('echartList5');
	        var myChart = echarts.init(chartDom);
	        var option;

	        option = {
	        	xAxis: {
	        		type: 'category',
	        	    data: item3
	        	},
	        	yAxis: {
	        		name:"亿kWh",
	        	    type: 'value'
	        	},
   			  	grid: {
   			    	left: '5%',
   			    	right: '3%',
   			    	bottom: '5%',
   			    	containLabel: true
   			  	},
	        	tooltip:{
	        		tigger:'axis',
	        		axisPointer:{
	        			type:'none'
	        		}
	        	},
	        	series: [{
	        		data: item2,
	        	    type: 'bar',
	        	}]
	        };

	        option && myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}
	});
	// 在运装机机组容量统计
	$.ajax({
		url : "../g/service/Sample/unitCapEchars",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId}),
	    success : function(data){
	    	unitCapEchars(data.res);
		}
	})
};
function unitselect(){
	var year = document.getElementById("yearSel").value;
	//根据年份 场景获取新能源利用小时数统计
	$.ajax({
		url : "../g/service/Sample/newEnergyhours ",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId,"year":year}),
	    success : function(data){
	    	var selectpower=$("#selectpower");
	        var dataList = [];
	        for(let item in data.newEnergyhours){
	        	 dataList.push({"name":data.newEnergyhours[item].unittypename, "value":data.newEnergyhours[item].unittype})
	        }
	        demo1= xmSelect.render({
	        	el:'#selectpower',
	            initValue:['光伏'],
	            theme: {
	            	color: '#409EFF',
	            },
	            language: 'zn',
	            data: dataList,
	            on: function(data1){
	            	//arr:  当前多选已选中的数据
	            	var arr=[];
	            	for(let item in data1.arr){
	            		arr.push(data1.arr[item].value);
	            	}
	            	//change, 此次选择变化的数据,数组
	            	var change = data1.change;
	            	//isAdd, 此次操作是新增还是删除
	            	var isAdd = data1.isAdd;
	            	unitselect2(arr);
	            	//可以return一个数组, 代表想选中的数据
	            	//return []
	        	},
	    	})
		}
	})
}
function unitselect2(newEnery){
	var year = document.getElementById("yearSel").value;
	$.ajax({
		url : "../g/service/Sample/unitSelect ",
		type:'post',
		contentType: 'application/json; charset=utf-8',
		data:JSON.stringify({"planid" : projectId,"year":year,"newEnery":newEnery}),
		success : function(data){
			var selectpower=$("#selectunit");
			var dataList = [];
			for(let item in data.UnitSelectData){
		    	dataList.push({"name":data.UnitSelectData[item].unitname, "value":data.UnitSelectData[item].unitid})
		    }
			demo1= xmSelect.render({
		    	el:'#selectunit',
		        theme: {
		        	color: '#409EFF',
		        },
          		language: 'zn',
          		data: dataList,
          		on: function(data2){
          			//arr:  当前多选已选中的数据
          			var arr=[];
          			for(let item in data2.arr){
          				arr.push(data2.arr[item].value);
          			}
           			//change, 此次选择变化的数据,数组
           			var change = data2.change;
           			//isAdd, 此次操作是新增还是删除
           			var isAdd = data2.isAdd;
           			newEneryData(arr,newEnery);
           			//可以return一个数组, 代表想选中的数据
           			//return []
          		},
           	});
		}
	});
}
function newEneryData(arr,newEnery){
	var year = document.getElementById("yearSel").value;
	$.ajax({
		url : "../g/service/Sample/newEneryData",
	    type:'post',
	    contentType: 'application/json; charset=utf-8',
	    data:JSON.stringify({"planid" : projectId , "year": year,"arr":arr,"newEnery":newEnery}),
	    success : function(data){
	    	var item3=[];
	       	var item2=[];
	       	for (let item in data.newEneryData){
	       		item3.push(data.newEneryData[item].unitname);
	       		item2.push(data.newEneryData[item].val);
	       	} 

	       	var chartDom = document.getElementById('echartList3');
	        var myChart = echarts.init(chartDom);
	      	var option;

	        option = {
	        	xAxis: {
	        		type: 'category',
	        	    data: item3
	        	},
	        	grid: {
	           		left: '3%',
	           	    right: '5%',
	           	    bottom: '20%',
	        		containLabel:true
	            },
	        	yAxis:{
	        		show: false,
	        		name:'利用小时/小时',
	        		type:'value'
	        	},
	        	tooltip:{
	        		tigger:'axis',
	        		axisPointer:{
	        			type:'none'
	        		}
	        	},
	        	yAxis: {
	        		type: 'value'
	        	},
	        	dataZoom:[{
	       			type:"inside",//详细配置可见echarts官网
	       		},{
	       			orient: "horizontal",
					show: this.zoomShow,//控制滚动条显示隐藏
	                realtime: true, //拖动滚动条时是否动态的更新图表数据
	                height: 25, //滚动条高度
	                start: 0, //滚动条开始位置（共100等份）
	                end: this.endValue,//滚动条结束位置
	                bottom: "10%"
	            }],
	        	series: [{
	        		data: item2,
	        	    type: 'bar'
	        	}]
			};
 			option && myChart.setOption(option);
 			window.addEventListener("resize", () => {
 				if(myChart){
 					myChart.resize()
 				}
 			})
		}
	})
}
function unitCapEchars(data) {
	var database = [];
	for(var i = 0;i < data.length;i++) {
		database.push({
			name: data[i].unittypename,	
			value: data[i].val,
			itemStyle: {
		        color: colorList[typeList.indexOf(data[i].unittype)]
	      	}
		});
	}
	var chartDom = document.getElementById('echartList6');
	var myChart = echarts.init(chartDom);
	var option = {
		tooltip: {
			trigger: 'item',
		    formatter: '{a} <br/>{b}: {c} ({d}%)'
		},
		graphic:{
			elements: [{
			    type: 'text',
			    style:{
			        text:"单位：MW",
			        textAlign:"center",
			        fontSize:14
			    },
			    right: 30,
			    top: 10
			}]
		},
		series: [{
	    	name: '在运机组装机容量统计',
	      	type: 'pie',
	      	radius: ['30%', '55%'],
	      	center:['45%','48%'],
		    labelLine: {
		    	length: 40
		    },
			avoidLabelOverlap: true,
			itemStyle: {
				borderRadius: 10,
		        borderColor: '#fff',
		        borderWidth: 2
			},
			label: {
		    	formatter: ' {b|{b}：}\n {c} {per|{d}%} ',
		        backgroundColor: '#F6F8FC',
		        borderColor: '#8C8D8E',
		        borderWidth: 1,
		        borderRadius: 4,
		        rich: {
		        	a: {
			            color: '#6E7079',
			            lineHeight: 22,
			            align: 'center'
			        },
			        hr: {
			            borderColor: '#8C8D8E',
			            width: '100%',
			            borderWidth: 1,
			            height: 0
			        },
			        b: {
			            color: '#4C5058',
			            fontSize: 14,
			            fontWeight: 'bold',
			            lineHeight: 33,
			            align: 'right'
			        },
			        per: {
			            color: '#fff',
			            backgroundColor: '#4C5058',
			            padding: [3, 4],
			            borderRadius: 4
			        }
				}
			},
			labelLine: {
		        show: true,
		        length: 20
			},
			data:database
		}]
	};
	option && myChart.setOption(option);
	window.addEventListener("resize", () => {
		if(myChart){
			myChart.resize()
		}
	})
}
function cliu(code){
	$(this.parent.document.getElementById('_nodeli_140')).find('a').click();
}
function jiedian(code){
	$(this.parent.document.getElementById('_nodeli_141')).find('a').click();
}
function xianlu(code){
	$(this.parent.document.getElementById('_nodeli_142')).find('a').click();
}
function fuhe(code){
 	$(this.parent.document.getElementById('_nodeli_143')).find('a').click();
}
function dianliang(code){
 	$(this.parent.document.getElementById('_nodeli_144')).find('a').click();
}

function getQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	return r ? unescape(r[2]) : null;
}
</script>
</html>